<template>
    <van-tabs v-model:active="active" scrollspy sticky background="#F7F8FA">
        <van-tab v-for='(item, index) in showsheetype' :title=item.name :key="index">
            
                <div class="card">
                    <div v-for="ele,index in item.arr" class="line" @click="gosheetdetail(ele.id)" :key="index">
                        <img :src="ele.coverImgUrl" class="sheetimg">
                        
                        <div>
                            <div class="line_name">{{ ele.name }}</div>
                        <div class="line_number">{{ ele.trackCount }}首</div>
                        </div>
                    </div>
                </div>
        </van-tab>
    </van-tabs>
</template>

<script setup>
import { usersheetApi } from '../../api/login'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const showsheetype = ref(
    {
        createsheet: { name: '创建歌单', arr: [] },
        collectsheet: { name: '收藏歌单', arr: [] },
    })
const props = defineProps({
    uid: String
})
const gosheetdetail = (id)=>{
    router.push({
        path: '/sheetdetail',
        query:{
            ids:id
        }
    })
}
onMounted(() => {
    setTimeout(async () => {
        let data = await usersheetApi(props.uid)
        if(localStorage.getItem('cookie')){
            data.playlist.forEach(item => {
            if (item.userId == props.uid) {
                showsheetype.value.createsheet.arr.push(item)
            } else {
                showsheetype.value.collectsheet.arr.push(item)
            }
        });
        }
    
    }, 500)
})
</script>


<style scoped>
.card {
    border-radius: 10px;
    border: 1px solid #e4e7ed;
    background-color: white;
    margin: 20px 0;
    width: 85%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* .cardbox {
    position: relative;
    min-height: 100px;
} */

.sheetimg {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}
.line {
    display: flex;
    margin: 10px 0;
}

.line_name {
    margin: 0 10px;
}

.line_number {
    color: #D6D8DA;
    margin: 5px 10px;
}
</style>